ASCII.jp：Vue.jsからReactへの移行で分かった「リアル」 ―どうすればよかったのか？

https://gyazo.com/2722bf2dbffda79dc86521431300415d

このページは、Vue.js／NuxtからReact／Next.jsへ移行した際に直面した「リアルな課題と学び」をまとめた記事

🔑 移行の背景と理由

プロジェクトで新機能追加・改善を検討するタイミングで技術選定を見直した。

デジタル庁のデザインシステムがReact版コンポーネントを提供しており、再実装コスト削減や品質担保のためReact採用が合理的だった。

AIコーディング支援ツール（Claude Code）がReactに最適化されており、生成精度・効率が高かった。

Reactのエコシステムは巨大で、ライブラリや資料が豊富。

移行で直面した課題

JSX構文への戸惑い

Vueのtemplate構文と異なり、UIとロジックが同じ場所にあるため慣れるまで混乱

Server／Client Componentの概念

Next.jsでは役割分担が必須で、Vue的な「全部クライアントで動く」発想が通用しない

ライブラリ互換性の欠如

Vue用ライブラリはReactで使えず、選定の幅が広すぎて迷いやすい

認証・セキュリティ設計の違い

Next.jsでは認証をサーバー側で扱う思想があり、Vue的なlocalStorage依存は危険

レビュー体制の不足

チームにReact経験者が少なく、生成AIコードの妥当性を判断できず「座学からレビュー」が必要になった

学びと改善ポイント

1. 思想の理解を先に：単なるコード移行ではなく「設計思想の学び直し」が必要。

2. 小規模実験環境を早期に用意：RSCや認証などを試すサンドボックスで理解を深めるべき。

3. ライブラリ選定は理由付きで：有名だからではなく、メンテ状況や思想との相性を基準に。

4. レビュー体制の整備：チーム全員で基礎勉強会やベストプラクティス共有を行うことが重要。